<template>
  <div class="item">
    <img :src="item.img" alt="" width="268" height="268">
    <p><h3>{{ item.title }}</h3></p>
    <div class="btm">
        <span>￥ {{ item.price }}</span>
        <span><el-button type="primary" round>查看</el-button></span>
    </div>
  </div>
</template>

<script setup>
import { ref,defineProps } from 'vue';
const props = defineProps({
    item: {
        type: Object,
    },

});

</script>

<style lang="scss" scoped>
.item{
    width: 268px;
    cursor: pointer;
    border-radius: 12px;
	box-shadow: 5px 5px 10px 0 #d5d5d5;
    img{
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    p{
        padding: 10px;
        box-sizing: border-box;
        height: 60px;
    }
    .btm{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
